<template>
  <el-card class="mt-10">
    <div class="chart" ref="chartRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "EchartsMap",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import china from "./china.json";

// 注册地图
echarts.registerMap("china", china as any);

const chartRef = ref();

const data = china.features.map((item, i) => {
  return {
    name: item.properties.name,
    value: i < 5 ? i * 10 : i * 100,
  };
});

onMounted(() => {
  const myEcharts = echarts.init(chartRef.value);
  const option = {
    series: {
      name: "新冠疫情分布图",
      type: "map",
      map: "china",
      label: {
        show: true,
      },
      data,
    },
    tooltip: {},
    visualMap: {
      type: "piecewise",
      pieces: [
        { min: 10000 }, // 不指定 max，表示 max 为无限大（Infinity）。
        { min: 1000, max: 9999 },
        { min: 100, max: 999 },
        { min: 10, max: 99 },
        { min: 1, max: 9 },
        {
          value: 0,
        },
      ],
    },
  };
  myEcharts.setOption(option);
});
</script>

<style scoped>
.mt-10 {
  margin-top: 10px;
}
.chart {
  height: 500px;
}
</style>
